<template>
  <div class="about">
    <img src="../assets/LOGO@1x.svg" class="logo">
    <div class="tabList">
      <div v-for="(item,index) in list" :key="index">{{item}}</div>
    </div>
    <div class="userBox">
      <img src="../assets/userImg.svg" class="userimg">
      <img src="../assets/icon_back@3x.png" class="loginOut">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["币币交易", "合约交易", "秒合约交易"]
    };
  },
  props: {}
};
</script>

<style lang="less" scoped>
.about {
  background: #1b2945;
  height: 1rem;
  cursor: pointer;
}
.colList {
  line-height: 1rem;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 0.16rem;
  color: #cacfe6;
  letter-spacing: -0.39px; /*no*/
  text-align: center;
}
.logo {
  width: 1.25rem;
  height: 0.27rem;
  margin: 0.37rem 0.94rem 0.36rem 0.4rem;
  float: left;
}
.tabList {
  float: left;
  line-height: 1rem;
  div {
    float: left;
    font-family: PingFangSC-Regular;
    color: #cacfe6;
    letter-spacing: -0.39px; /*no*/
    text-align: center;
    margin-right: 0.94rem;
    cursor: pointer;
  }
}
.userBox {
  float: right;
  margin-right: 1.15rem;
}
.userimg {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #ccc;
  margin: 0.3rem 0.5rem 0 0;
  vertical-align: middle;
  float: left;
}
.loginOut {
  width: 0.24rem;
  height: 0.24rem;
  margin: 0.38rem 0 0 0;
  float: left;
}
</style>

